import React, { useCallback, useEffect, useState, useRef } from "react";
import { Image, DatePicker, Switch, Space, message } from "antd";
import { Input, Select, BatchSuffixInput } from "@/views/components/PrefixPlaceholder";
import { NumText } from "@/pages/OrderModule/common/components/CommonText";
import { SearchSimpleTable } from "@/views/components/SearchTable/index";
import { useTableConfig } from "@/views/components/SearchTable/hooks/useTableConfig";
import CommonStoreSearchInput from "@/views/components/CommonStoreSearchInput/index";
import WarehouseSelect from "@/views/components/WarehouseSelect"; // 导入WarehouseSelect组件
import AreaCodeSelect from "@/pages/PurchaseModule/propose/components/Actions/AreaCodeSelect";
import { getHistorycountingdetailsList, queryAreaCode } from "./service";
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD HH:mm:ss";
const SortWallList = () => {
	const tableRequest = getHistorycountingdetailsList;
	const [selectedWarehouse, setSelectedWarehouse] = useState(null);
	const areaOption = useRef();

	const defaultColumns = [
		{
			name: "清点单号",
			code: "countingNo",
			search: {
				order: 2,
				content: () => <Input allowClear placeholder="清点单号" />
			},
			width: 200
		},
		{
			name: "商品图片",
			code: "skuImage",
			render: (value, record, i) => <Image width={60} src={value} />,
			width: 200
		},
		{
			name: "供应商",
			code: "supplierName",
			search: {
				order: 3,
				content: () => <Input allowClear placeholder="供应商" />
			},
			width: 200
		},
		{
			name: "区域编码",
			code: "areaCode",
			search: {
				order: 8,
				code: "supplierArea",
				content: () => (
					<AreaCodeSelect
						origin="true"
						size="middle"
						placeholder="区域编码"
						mode="multiple"
						options={areaOption.current}
						showArrow={false}
						maxTagCount={2}
						style={{ lineHeight: "22px" }}
					/>
				)
			},
			width: 200
		},
		{
			name: "商品名称",
			code: "skuName",
			search: {
				order: 5,
				content: () => <Input allowClear placeholder="商品名称" />
			},
			width: 200
		},
		{
			name: "商品编码",
			code: "skuCode",
			search: {
				order: 4,
				content: () => <Input allowClear placeholder="商品编码" />
			},
			width: 200
		},
		{
			name: "款式编码",
			code: "spuCode",
			search: {
				order: 6,
				content: () => <Input allowClear placeholder="款式编码" />
			},
			width: 200
		},
		,
		{
			name: "颜色规格",
			code: "skuSpec",
			search: {
				order: 7,
				content: () => <Input allowClear placeholder="颜色规格" />
			},
			width: 200
		},
		{
			name: "采购单价",
			code: "purchasePrice",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			search: {
				order: 1,
				code: "warehouse",
				content: () => {
					return <WarehouseSelect value={selectedWarehouse} placeholder={"所属仓库"} onChange={handleWarehouseChange} />;
				}
			},
			width: 200
		},
		{
			name: "本次清点数",
			code: "countingQuantity",
			width: 200
		},
		{
			name: "采购金额",
			code: "purchaseAmount",
			render: value => value && <NumText as="s1" pre="¥" num={value} />,
			width: 200
		},
		{
			name: "操作人",
			code: "operatorName",
			width: 200
		},
		{
			name: "清点时间",
			code: "createTime",
			search: {
				order: 180,
				span: 6,
				group: [
					// {
					// 	span: 12,
					// 	code: "timeType",
					// 	content: () => <Input allowClear placeholder="清点时间" />
					// },
					{
						span: 24,
						keys: ["startTime", "endTime"],
						code: "times",
						content: () => <RangePicker style={{ width: '434px'}} format={dateFormat} showTime placeholder={["开始时间", "结束时间"]} />
					}
				]
			},
			width: 200
		}
	];
	async function getQueryAreaCode() {
		const { success, data } = await queryAreaCode({ areaCode: "" });
		if (success) {
			areaOption.current = data.map(e => {
				return {
					...e,
					value: e.id,
					label: e.name
				};
			});
		}
	}
	const [columns, setColumns] = useState(defaultColumns);
	const handleWarehouseChange = value => {
		setSelectedWarehouse(value);
	};
	const LeftBtns = <Space></Space>;
	const tableKey = "HistoryInventoryPage231";
	const { searchSimpleTableProps } = useTableConfig({
		tableKey,
		rowKey: "id",
		columns,
		tableRequest,
		pageSize: 500,
		pageSizeOptions: [50, 100, 500, 1000, 5000],
		autoFetch: true,
		hasPagination: true,
		columnResize: true,
		hasQuickSearch: false,
		beforeQuerySearch: ({ API_DATA }) => {
			getQueryAreaCode();
			return { ...API_DATA };
		},
		resetSourceData: false,
		hasColsSetting: true
	});
	return (
		<>
			<SearchSimpleTable key={tableKey} leftBtns={LeftBtns} mounted={false} {...searchSimpleTableProps} />
		</>
	);
};

export default React.memo(SortWallList, () => {
	return true;
});
